// 用于搭配content.vue
import Viewer from 'viewerjs';
import Clipboard from "clipboard";

export function setArticleContentStyle() {
    "use strict"

    // 清除由后端接口带来的<pre style="line-height=125%"></pre> 后端不知道怎么改，先从前端修改吧
    $('pre').each(function () {
        let _this = $(this)
        _this.removeAttr("style")
    })

    setOpenPhotosFeature()

    setClipBtn()
}

// 利用viewer.js 设置图片查看器，指定一个根节点：content，令下面的图片都可以查阅
function setOpenPhotosFeature() {
    // 获取所有img
    let imgs = document.getElementsByTagName('img');
    for (let i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
            const viewer = new Viewer(document.getElementById('content'), {
                inline: false,
                viewed() {
                    viewer.zoomTo(1);
                },
            })
        }
        imgs[i].style.cursor = "pointer";
    }
}

function setClipBtn() {
    let codeDiv = document.getElementsByTagName('pre')
    for (let i = 0; i < codeDiv.length; i++) {
        codeDiv[i].style.position = "relative"
        codeDiv[i].id = "codeDiv-" + i
        let id = 'clipBtn-' + i
        // 代码块内容
        let code = codeDiv[i].getElementsByTagName('code')
        let codeId = "code-" + i
        code[0].id = codeId
        // clipboard.js的两个参数
        let k = 'data-clipboard-action="copy"'
        let j = 'data-clipboard-target="#' + codeId + '"'
        let btnCls = 'class = "el-button el-button--default el-button--mini is-circle"'
        let btnStyle = 'style = "position: absolute;top: 5px;right: 5px; opacity:0;transition: all .5s;"'
        codeDiv[i].innerHTML += "<button " + btnCls + " "
            + k + " " + j + " " +  btnStyle + " id= " + id + ">" +
            "<i class='el-icon-document-copy'></i>"
            + "</button>"
        let clipBtn = document.getElementById(id)

        clipBtn.onclick = (() => {
            let clipboard = new Clipboard('#' + id)
            clipboard.on('success', e => {
                clipBtn.classList.add('el-button--success')
                clipBtn.innerHTML = "<i class='el-icon-check'></i>";
                setTimeout(() => {
                    clipBtn.innerHTML = "<i class='el-icon-document-copy'></i>";
                    clipBtn.classList.remove('el-button--success')
                }, 3000)
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                console.log('Clipboard.js error!Reason: ' + e)
                // 释放内存
                clipboard.destroy()
            })
        })
        hover(codeDiv[i], function () {
            clipBtn.style.opacity = 1
        }, function () {
            clipBtn.style.opacity = 0
        })
    }
}

// hover方法
function hover(ele, fn1, fn2) { //ele dom元素 fn1 移入事件回调  fn2 移出事件回调
    ele.onmouseenter = function () { //移入事件
        fn1.call(ele)//让函数的this 指向当前事件触发的元素
    }
    ele.onmouseleave = function () { //移出事件
        fn2.call(ele) //让函数的this 指向当前事件触发的元素

    }
}